<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>移动端rem适配练习</title>
    <link rel="stylesheet" href="./bases.css">
    <link rel="stylesheet" href="./index.css">
    <script src="./jquery3.5.min.js"></script>
</head>

<body>
    <div class="phone">
        <!-- 头部 -->
        <div class="phone-head">
            <div class="nav">
                <div class="nav_head">
                    <div class="nav_img">
                        <img src="./img/tab/tab.png" />
                    </div>
                    <div class="nav-head">
                        <a class="nav-i" href="#">
                            <img src="./img/tab/tab-left.png">
                        </a>
                        <div class="nav-center">
                            <a href="#">
                                <img class="nav-i_img" src="./img/tab/tab.gif">
                            </a>
                        </div>
                        <a class="nav-i" href="#">
                            <img src="./img/tab/tab-right.png">
                        </a>
                    </div>
                </div>
                <div class="tab-show">
                    <div class="nav-head">
                        <a class="nav-i" href="#">
                            <img src="./img/tab/tab-left.png">
                        </a>
                        <div class="tab-show-center">
                            <a class="tab-showbj"></a>
                            <img class="nav-sousuo_img" src="./img/tab/sousuo.png" />
                            <div class="tab-input"><input placeholder="电脑以旧换新88折"></div>
                        </div>
                        <a class="nav-i" href="#">
                            <img src="./img/tab/tab-right.png">
                        </a>
                    </div>
                </div>
                <div class="nav-body">
                    <div class="nav-tab">
                        <a class="sousuo"></a>
                        <img class="nav-sousuo_img" src="./img/tab/sousuo.png" />
                        <div class="nav-input"><input placeholder="电脑以旧换新88折"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- banner轮播图推荐区域 -->
        <div class="banner">
            <img class="banner-bj" src="./img/tab/tab-bj.png">
            <div class="banner-slide">
                <div class="banner-listImg" style="left: 0rem;">
                    <img src="./img/tab/tab-slide1.jpeg">
                    <img src="./img/tab/tab-slide2.png">
                    <img src="./img/tab/tab-slide3.png">
                    <img src="./img/tab/tab-slide4.png">
                    <img src="./img/tab/tab-slide5.png">
                </div>
                <ul class="banner-ul">
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <!-- 爆款推荐区 -->
        <div class="hor">
            <a href="#">
                <img src="./img/hor/hor-left.gif">
            </a>
            <a href="#">
                <img src="./img/hor/hor-center.gif">
            </a>
            <a href="#">
                <img src="./img/hor/hor-right.gif">
            </a>
        </div>
        <!-- 小图标区域 -->
        <div class="sn-list">
            <ul>
                <li>
                    <img src="./img/list/list1.png" />
                    <a>电商秒杀</a>
                </li>
                <li>
                    <img src="./img/list/list2.png" />
                    <a>电商超市</a>
                </li>
                <li>
                    <img src="./img/list/list3.png" />
                    <a>超市拼购</a>
                </li>
                <li>
                    <img src="./img/list/list4.png" />
                    <a>手机数码</a>
                </li>
                <li>
                    <img src="./img/list/list5.png" />
                    <a>商超家电</a>
                </li>
                <li>
                    <img src="./img/list/list6.png" />
                    <a>免费水果</a>
                </li>
                <li>
                    <img src="./img/list/list7.png" />
                    <a>super会员</a>
                </li>
                <li>
                    <img src="./img/list/list8.png" />
                    <a>签到有礼</a>
                </li>
                <li>
                    <img src="./img/list/list9.png" />
                    <a>领券中心</a>
                </li>
                <li>
                    <img src="./img/list/list10.png" />
                    <a>更多频道</a>
                </li>
            </ul>
        </div>
        <!-- 红包包邮 -->
        <div class="newImg">
            <a href="#"><img class="first-img" src="./img/newImg/newImg1.png"></a>
            <a href="#"><img src="./img/newImg/newImg4.gif"></a>
            <a href="#"><img src="./img/newImg/newImg4.gif"></a>
        </div>
        <!-- 秒杀区 -->
        <div class="seckill">
            <div class="seckill-left">
                <div class="seckill-t">
                    <a href="#">限时秒杀</a>
                    <div>
                        <span>11</span>:
                        <span>22</span>:
                        <span>33</span>
                    </div>
                </div>
                <div class="seckill-b">
                    <a class="seckill-b-tit" href="#">人气好货限时抢</a>
                    <div class="seckill-img">
                        <a href="#"><img src="./img/seckill-img/seckill-img1.jpeg">
                            <p>¥9.9</p>
                        </a>
                        <a href="#"><img src="./img/seckill-img/seckill-img2.jpeg">
                            <p>¥6</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="seckill-right">
                <div class="seckill-left">
                    <div class="seckill-t">
                        <a href="#">大聚惠</a>
                    </div>
                    <div class="seckill-b">
                        <a class="seckill-b-tit" href="#">聚优品 · 惠生活</a>
                        <div class="seckill-img">
                            <a href="#"><img src="./img/seckill-img/seckill-img3.webp">
                                <div class="seckill-ti">爱氏晨曦</div>
                            </a>
                            <a href="#"><img src="./img/seckill-img/seckill-img4.webp">
                                <div class="seckill-ti">伊利(YILI)</div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="seckill-a">
            <div class="seckill-left-a">
                <div class="seckill-t">
                    <a href="#">新品首发</a>
                </div>
                <div class="seckill-b">
                    <a class="seckill-b-tit" href="#">418免费试新机</a>
                    <div class="seckill-img">
                        <a href="#"><img src="./img/seckill-img/seckill-img5.webp"></a>
                        <a href="#"><img src="./img/seckill-img/seckill-img6.webp"></a>
                    </div>
                </div>
            </div>
            <div class="seckill-right-a">
                <div class="seckill-t">
                    <a href="#">电商拼购</a>
                </div>
                <div class="seckill-b">
                    <a class="seckill-b-tit" href="#">2人拼更实惠 全场包邮</a>
                    <div class="seckill-img">
                        <a href="#"><img src="./img/seckill-img/seckill-img7.webp">
                            <div class="seckill-ti">2人拼10.8</div>
                        </a>
                        <a href="#"><img src="./img/seckill-img/seckill-img8.webp">
                            <div class="seckill-ti">2人拼19.8</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 推荐区 -->
        <div class="seckill-c">
            <div class="seckill-body">
                <div class="seckill-Fir">
                    <a href="#">为您推荐</a>
                    <a href="#">精选频道</a>
                </div>
                <div class="seckill-child">
                    <a href="#"><img src="./img/seckill-img/seckill-child1.webp"></a>
                    <a href="#">电商国际</a>
                </div>
                <div class="seckill-child">
                    <a href="#"><img src="./img/seckill-img/seckill-child2.webp"></a>
                    <a href="#">电商Out</a>
                </div>
                <div class="seckill-child">
                    <a href="#"><img src="./img/seckill-img/seckill-child3.png"></a>
                    <a href="#">会员抢购</a>
                </div>
                <div class="seckill-child">
                    <a href="#"><img src="./img/seckill-img/seckill-child4.png"></a>
                    <a href="#">Super会员</a>
                </div>
            </div>
        </div>
        <!-- 推荐榜单区 -->
        <div class="recommend">
            <img src="./img/recommend/recommend.png" />
        </div>
        <div class="recommend-item">
            <div class="recommend-list">
                <div class="recomment-c">
                    <a href="#"><img class="recomment-cImg" src="./img/recommend-ltem/recommend-ltem1.webp"></a>
                    <div class="recomment-ct">
                        <img src="./img/recommend-ltem/recomment-bg1.png">
                        <div class="recomment-tit">
                            <span>人气榜</span>
                            <a class="a" href="#">人气智能电视榜</a>
                            <a href="#">卖爆1.7万件</a>
                        </div>
                    </div>
                </div>
                <div class="recomment-c">
                    <a href="#"><img class="recomment-cImg" src="./img/recommend-ltem/recommend-ltem2.webp"></a>
                    <div class="recomment-ct">
                        <img src="./img/recommend-ltem/recomment-bg2.png">
                        <div class="recomment-tit">
                            <span>人气榜</span>
                            <a class="a" href="#">时尚保鲜冰箱榜</a>
                            <a href="#">卖爆2.7万件</a>
                        </div>
                    </div>
                </div>
                <div class="recomment-c">
                    <a href="#"><img class="recomment-cImg" src="./img/recommend-ltem/recommend-ltem3.webp"></a>
                    <div class="recomment-ct">
                        <img src="./img/recommend-ltem/recomment-bg3.png">
                        <div class="recomment-tit">
                            <span>人气榜</span>
                            <a class="a" href="#">家用电饭煲榜</a>
                            <a href="#">卖爆1.7万件</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="recomment-child">
                <div class="recomment-child1">
                    <div class="recomment-left-a">
                        <div class="recomment-t">
                            <h4 class="recomment-f" href="#">逆龄活肤精华榜</h4>
                            <a href="#">人气榜</a>
                        </div>
                        <div class="recomment-b">
                            <a class="recomment-b-tit" href="#">卖爆5297件</a>
                            <div class="recomment-img">
                                <a href="#"><img src="./img/recommend/recomment-img1.webp"></a>
                                <a href="#"><img src="./img/recommend/recomment-img2.webp"></a>
                            </div>
                        </div>
                    </div>
                    <div class="recomment-right-a">
                        <div class="recomment-t">
                            <h4 class="recomment-f" href="#">肉类熟食小吃榜</h4>
                            <a href="#">趋势榜</a>
                        </div>
                        <div class="recomment-b">
                            <a class="recomment-b-tit" href="#">本周趋势上升139%</a>
                            <div class="recomment-img">
                                <a href="#"><img src="./img/recommend/recomment-img3.webp">
                                </a>
                                <a href="#"><img src="./img/recommend/recomment-img4.webp">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="recomment-child2">
                    <div class="recomment-left-b">
                        <div class="recomment-t">
                            <h4 class="recomment-f" href="#">笔记本电脑榜</h4>
                            <a href="#">人气榜</a>
                        </div>
                        <div class="recomment-b">
                            <a class="recomment-b-tit" href="#">卖爆5988件</a>
                            <div class="recomment-img">
                                <a href="#"><img src="./img/recommend/recomment-img5.webp"></a>
                                <a href="#"><img src="./img/recommend/recomment-img6.webp"></a>
                            </div>
                        </div>
                    </div>
                    <div class="recomment-right-b">
                        <div class="recomment-t">
                            <h4 class="recomment-f" href="#">诱惑迷人唇膏榜</h4>
                            <a href="#">人气榜</a>
                        </div>
                        <div class="recomment-b">
                            <a class="recomment-b-tit" href="#">卖爆4450件%</a>
                            <div class="recomment-img">
                                <a href="#"><img src="./img/recommend/recomment-img7.webp">
                                </a>
                                <a href="#"><img src="./img/recommend/recomment-img8.webp">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 猜你喜欢区 -->
        <div class="guess">
            <div class="guessLike">
                <img src="./img/guess/guess1.webp">
            </div>
            <div class="pro-list">
                <div class="pro-body">
                    <div class="pro-left">
                        <div class="pro-box">
                            <div class="box-top">
                                <img src="./img/box-left/box-left1.webp" />
                            </div>
                            <div class="box-center">卡姿希品牌服饰品牌蕾丝文胸女大胸显小文胸套装超薄款性感bra少女日系内衣（保养1-5天发货） 白贝壳 70C</div>
                            <div class="box-bottom">¥999</div>
                        </div>
                        <div class="pro-box">
                            <div class="box-top">
                                <img src="./img/box-left/box-left2.webp" />
                            </div>
                            <div class="box-center">realme 真我Buds 经典版（有线耳机） 黑色 OPPO提供售后支持</div>
                            <div class="box-bottom">¥99</div>
                        </div>
                        <div class="pro-box">
                            <div class="box-top">
                                <img src="./img/box-left/box-left3.webp" />
                            </div>
                            <div class="box-center">卡姿希品牌服饰品牌蕾丝文胸女大胸显小文胸套装超薄款性感bra少女日系内衣（保养1-5天发货） 白贝壳 70C</div>
                            <div class="box-bottom">¥999</div>
                        </div>
                        <div class="pro-box">
                            <div class="box-top">
                                <img src="./img/box-left/box-left4.webp" />
                            </div>
                            <div class="box-center">洽洽五香瓜子恰恰经典包装葵花籽休闲零食小吃308g</div>
                            <div class="box-bottom">¥12.9</div>
                        </div>
                        <div class="pro-box">
                            <div class="box-top">
                                <img src="./img/box-left/box-left5.webp" />
                            </div>
                            <div class="box-center">葵花压榨油，天然植物油苏宁自营，品质保证</div>
                            <div class="box-bottom">¥88</div>
                        </div>
                        <div class="pro-box">
                            <div class="box-top">
                                <img src="./img/box-left/box-left6.webp" />
                            </div>
                            <div class="box-center">MACHENIKE机械师M1有线鼠标套装发光电竞游戏鼠标便携家用办公笔记本电脑台式吃鸡LOL鼠标垫套装非蓝牙非无线</div>
                            <div class="box-bottom">¥50</div>
                        </div>
                    </div>
                    <div class="pro-right">
                        <div class="pro-box">
                            <div class="box-top">
                                <img src="./img/box-right/box-right1.webp" />
                            </div>
                            <div class="box-center">保湿多功能化妆水，肌肤保湿，多重补充肌肤营养</div>
                            <div class="box-bottom">¥88</div>
                        </div>
                        <div class="pro-box">
                            <div class="box-top">
                                <img src="./img/box-right/box-right2.webp" />
                            </div>
                            <div class="box-center">亲诺(chilovee)小分子水泡沫洗发水200ml 新生儿宝宝儿童沐浴无泪洗发露洗发液洗护用品泡沫型 小分子水洗发水（200ml）
                            </div>
                            <div class="box-bottom">¥50</div>
                        </div>
                        <div class="pro-box">
                            <div class="box-top">
                                <img src="./img/box-right/box-right3.webp" />
                            </div>
                            <div class="box-center">华为原装充电插头，厂家直销</div>
                            <div class="box-bottom">¥30</div>
                        </div>
                        <div class="pro-box">
                            <div class="box-top">
                                <img src="./img/box-right/box-right4.webp" />
                            </div>
                            <div class="box-center">卫岗酸奶，促进肠道吸收，饭后最佳</div>
                            <div class="box-bottom">¥50</div>
                        </div>
                        <div class="pro-box">
                            <div class="box-top">
                                <img src="./img/box-right/box-right5.webp" />
                            </div>
                            <div class="box-center">功能饮料红牛</div>
                            <div class="box-bottom">¥10</div>
                        </div>
                        <div class="pro-box">
                            <div class="box-top">
                                <img src="./img/box-right/box-right6.webp" />
                            </div>
                            <div class="box-center">Midea美的电饭煲，一锅能当两锅用，妈妈的好帮手</div>
                            <div class="box-bottom">¥50</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 尾部固定登陆区域 -->
        <div class="Navigations">
            <div class="Navigations-body">
                <a href="#"><img src="./img/Navigation/Navigations.png" /> </a>
            </div>
        </div>
        <!-- 尾部固定区域 -->
        <div class="Navigation">
            <div class="Navigation-body">
                <a href="#">
                    <img src="./img/Navigation/Navigation1.png" />
                    <p>首页</p>
                </a>
                <a href="#">
                    <img src="./img/Navigation/Navigation2.png" />
                    <p>分类</p>
                </a>
                <a href="#">
                    <img src="./img/Navigation/Navigation3.png" />
                    <p>排行榜</p>
                </a>
                <a href="#">
                    <img src="./img/Navigation/Navigation4.png" />
                    <p>购物车</p>
                </a>
                <a href="#">
                    <img src="./img/Navigation/Navigation5.png" />
                    <p>我的易购</p>
                </a>
            </div>
        </div>
        <!-- 右侧固定小图标区 -->
        <div class="suspension">
            <div class="suspension1">
                <a href="#"><img src="./img/suspension/suspension1.gif" /></a>
            </div>
            <div class="suspension2">
                <a href="#"><img src="./img/suspension/suspension2.gif" /></a>
            </div>
        </div>
        <div class="bottom-img">
            <img src="./img/body/snlogo.png">
        </div>
    </div>
    </div>
    <script type="text/javascript">
        let bannerSlide = document.querySelector('.banner-slide');
        let bannerListimg = document.querySelector('.banner-listImg');
        let bannerLi = document.querySelector('.banner-ul').querySelectorAll('li');
        let nav = document.querySelector('.nav');
        let seckill = document.querySelector('.seckill');
        let timerStar = null;
        let index = 0;
        function status() {
            timerStar = setInterval(function () {
                leftSlide()
            }, 2000)
        }
        status();
        function leftSlide() {
            let leftstatus = 0;
            index++;
            if (index > 4) index = 0;
            $('.banner-ul li:eq(' + index + ')').addClass('current').siblings().removeClass('current')
            if (bannerListimg.style.left === '-56.11rem') {
                leftstatus = 0;
            } 
            // else if(bannerListimg.style.left === '-14.11rem')leftstatus = parseInt(bannerListimg.style.left)-0.1;
             else {
                leftstatus = parseInt(bannerListimg.style.left)-0.07 - 14.04 ;
            }
            
            bannerListimg.style.left = leftstatus + 'rem'
        }
        $('.banner-ul li').click(function () {
            $(this).addClass('current').siblings().removeClass('current');
            bannerListimg.style.left = parseInt(-index * 14.04) + 'rem';
        });
        $('.banner-slide').hover(function () {
            clearInterval(timerStar);
        }, function () {
            status();
        });
        window.addEventListener('scroll', function () {
            if (window.pageYOffset > seckill.offsetTop) {
                document.querySelector('.tab-show').style.display = 'block';
            } else {
                document.querySelector('.tab-show').style.display = 'none';
            }
        })
    </script>
</body>

</html>